<template>
  <div id="content">
    <van-nav-bar title="申请列表" left-text="返回" left-arrow fixed @click-left="onClickLeft" />

    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell>
            <div class="table-title">
              <div style="width:30px">序号</div>
              <div style="width:130px">申请名称</div>
              <div style="width:120px">状态</div>
              <div style="width:70px">申请时间</div>
            </div>
          </van-cell>
          <van-cell v-for="(item,index) in list" :key="index" :to="'/applyDetail/'+item.id">
            <div class="cell-div-border">
              <div style="width:30px">{{index+1}}</div>
              <div style="width:130px">{{item.apply_name}}</div>
              <div style="width:130px">
                {{item.sta_name}}
                <span v-if="item.status == 1">({{item.pass_name}})</span>
                <span v-else-if="item.status == 2">({{item.edu_pass_name}})</span>
                <span v-else></span>
              </div>
              <div style="width:70px">{{item.add_time}}</div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell, List, PullRefresh, SwipeCell, Dialog, Button, NavBar } from 'vant'
import { userApply } from '../../api/userApply'

Vue.use(Cell).use(List).use(PullRefresh).use(SwipeCell).use(Dialog).use(Button).use(NavBar)

export default {
  data()
  {
    return {
      list: [],
      listPage: 1,
      listPageSize: 15,
      type: 2,
      loading: false,
      finished: false,
      error: false,
      refreshing: false
    }
  },
  created()
  {
    this.type = this.$route.params.type
    this.fetchUserApply()
  },
  methods: {
    // 加载更多
    onLoad()
    {
      // 异步更新数据
      this.listPage = this.listPage + 1
      userApply({ page: this.listPage, limit: this.listPageSize, type: this.type }).then(res =>
      {
        this.list = this.list.concat(res.data.list)
        if (res.data.total == 0)
        {
          this.finished = true
        }
      }).catch(err =>
      {
        Dialog.alert({
          message: err.data.message,
          theme: 'round-button'
        }).then(() =>
        {
          this.$router.go(-1)
        })
      })
      // 加载状态结束
      this.loading = false
    },
    // 返回上一步
    onClickLeft()
    {
      this.$router.go(-1)
    },
    // 刷新
    onRefresh()
    { // 清空列表数据
      this.finished = false
      this.loading = true
      this.listPage = 1
      this.fetchUserApply()
      var self = this
      setTimeout(() =>
      {
        self.refreshing = false
        self.loading = false
      }, 1000)
      // 重新加载数据
    },
    // 加载用户申请列表
    fetchUserApply()
    {
      userApply({ page: this.listPage, limit: this.listPageSize, type: this.type }).then(res =>
      {
        this.list = res.data.list
        if (res.data.total == 0)
        {
          this.finished = true
        }
      }).catch(err =>
      {
        Dialog.alert({
          message: err.data.message,
          theme: 'round-button'
        }).then(() =>
        {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.header .title {
  margin-left: 100px;
}
.table-title {
  display: flex;
  justify-content: space-around;
  /* border-bottom: 1px solid #f5f6f7; */
  /* margin-bottom: 20px; */
  line-height: 40px;
  font-weight: bold;
}
.table-title div {
  text-align: center;
}
.list {
  margin-top: 40px;
}
.van-cell div {
  text-align: center;
}
.cell-div-border {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
